<template>
  <list-container @resize="resize">
    <template slot="tools">
      <Button
        type="primary"
        icon="md-add"
        style="margin-bottom: 10px"
        :to="{ name: 'role-add' }"
        >Add</Button
      >
    </template>
    <template slot="table">
      <Table
        :loading="asyncLoading"
        :size="size"
        row-key="id"
        :columns="tableColumns"
        :data="tableData"
        :height="tableHeight"
      >
        <template slot-scope="{ row }" slot="action">
          <Button
            shape="circle"
            size="small"
            icon="ios-create-outline"
            :to="{
              name: 'role-edit',
              query: { data: JSON.stringify(row) }
            }"
          >
            Edit
          </Button>
          <Button
            shape="circle"
            type="warning"
            size="small"
            icon="ios-trash"
            :style="{ marginLeft: '5px' }"
            @click="handeDel(row)"
          >
            Trash
          </Button>
          <Button
            shape="circle"
            type="primary"
            size="small"
            icon="ios-hammer"
            :style="{ marginLeft: '5px' }"
            :to="{
              name: 'role-author',
              query: { data: JSON.stringify(row) }
            }"
          >
            Authorization
          </Button>
        </template>
      </Table>
    </template>
  </list-container>
</template>
<script>
/**
 * 消息列表管理
 */
import { InitListPage } from "@m/ListMixins";
import { roleList, delRole } from "@/api/role.js";
export default {
  mixins: [InitListPage],

  data() {
    return {
      tableColumns: [
        {
          title: "Role Name",
          key: "roleName"
        },
        {
          title: "Create Date",
          key: "createTime"
        },
        {
          title: "Create Date",
          key: "createTime"
        },
        {
          title: "Action",
          slot: "action",
          fixed: "right",
          width: 320
        }
      ],
      tableData: [],
      queryParams: {},
      asyncLoading: false
    };
  },
  created() {
    this.handleSearch();
  },
  methods: {
    handleSearch() {
      this.asyncLoading = true;
      roleList(this.queryParams)
        .then(({ data }) => {
          this.tableData = data;
        })
        .catch(() => {})
        .finally(() => {
          this.asyncLoading = false;
        });
    },
    handeDel(row) {
      this.$Modal.confirm({
        title: "Tips",
        content: "Confirm delete？",
        loading: true,
        okText: "confirm",
        cancelText: "cancel",
        onOk: () => {
          delRole(row.id)
            .then(() => {
              this.$Message.success("Trash Success");
              this.handleSearch();
            })
            .finally(() => {
              this.$Modal.remove();
            });
        }
      });
    }
  }
};
</script>
